<template>
	<view class="cu-avatar" :class="className" :style="{'background-image': `url(${src})`}" @click="previewImg"></view>
</template>

<script>
	export default {
		props: {
			// 大小
			size: {
				type: String,
				default() {
					return ''
				}
			},
			// 默认为圆形
			round: {
				type: Boolean,
				default() {
					return true
				}
			},
			radius: {
				type: Boolean,
				default() {
					return false
				}
			},
			src: {
				type: String,
				default() {
					return ''
				}
			},
			// 预览
			preview: {
				type: Boolean,
				default() {
					return true
				}
			}
		},
		computed: {
			className() {
				let clsName = []
				if (this.radius) {
					clsName.push('radius')
				} else {
					if (this.round) {
						clsName.push('round')
					}
				}
				
				if (this.size && ['sm', 'lg', 'xl'].indexOf(this.size) !== -1) {
					clsName.push(this.size)
				}
				
				return clsName
			}
		},
		methods: {
			previewImg() {
				if (this.preview) {
					uni.previewImage({
						current: this.src,
						urls: [this.src]
					})
				}
				this.$emit('click')
			}
		}
	}
</script>

<style>
</style>
